<template>
  <div class="app-container">
    <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
      label-width="120px">
      <h2 style="text-align: center">_年度质量监控试验台账表</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <!-- <el-col :span="8">
          <el-form-item label="年度" prop="year">
            <el-date-picker format="yyyy" value-format="yyyy" v-model="formData.year" type="year" placeholder="选择年">
            </el-date-picker>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="年月份" prop="year">
            <el-date-picker @change="changeMonth" format="yyyy-MM" value-format="yyyy-MM" v-model="year" type="month"
              placeholder="选择月">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">
        <el-button type="primary" plain size="mini" @click="handleAdd">增行</el-button>
        <!-- <el-button type="danger" plain size="mini" @click="handleDele">删行</el-button> -->
      </h4>
      <el-table :data="formData.ledgerList" :border="true" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column min-width="150" label="登记时间" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.registerTime`" :rules="rules.registerTime">
              <el-date-picker v-model="scope.row.registerTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{ width: '100%' }" placeholder="请选择登记时间" clearable></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="150" label="类别（产品/项目/参数）" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.lbcpxmcs`" :rules="rules.lbcpxmcs">
              <el-input v-model="scope.row.lbcpxmcs" placeholder="请输入类别（产品/项目/参数）"></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column min-width="150" label="产品/项目/参数" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.cpxmcs`" :rules="rules.cpxmcs">
              <el-input v-model="scope.row.cpxmcs" placeholder="请输入产品/项目/参数"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="150" label="能力验证文件编号" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.nlyzwjbh`" :rules="rules.nlyzwjbh">
              <el-input v-model="scope.row.nlyzwjbh" placeholder="请输入能力验证文件编号"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="150" label="能力验证方式" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.nlyzfs`" :rules="rules.nlyzfs">
              <el-select v-model="scope.row.nlyzfs" filterable placeholder="请选择能力验证方式">
                <el-option v-for="dict in dict.type.ability_verification_mode" :key="dict.value" :label="dict.label"
                  :value="dict.label" />
              </el-select>
            </el-form-item>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="300" label="能力验证文件编号文件" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.nlyzwjbhFile`" :rules="rules.nlyzwjbhFile">
              <FileUpload v-model="scope.row.nlyzwjbhFile"></FileUpload>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="参加人员" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`infoList.${scope.$index}.joinUserId`" :rules="rules.joinUserId">
              <UserDialogSelection :disabled="$route.query.isInfo || isInfo" @change="changeOpen($event, scope.$index)"
                placeholder="请选择参加人员" v-model="scope.row.joinUserId"></UserDialogSelection>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="150" label="比对试验方案编号" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.bdsyfabh`" :rules="rules.bdsyfabh">
              <el-input v-model="scope.row.bdsyfabh" placeholder="请输入比对试验方案编号"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="300" label="比对试验方案编号文件" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.bdsyfabhFile`" :rules="rules.bdsyfabhFile">
              <FileUpload v-model="scope.row.bdsyfabhFile"></FileUpload>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="150" label="评价结果" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.result`" :rules="rules.result">
              <el-input v-model="scope.row.result" placeholder="请输入评价结果"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="质量监控计划" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.qualityMonitorId`"
              :rules="rules.qualityMonitorId">
              <el-select v-model="scope.row.qualityMonitorId" placeholder="请选择质量监控计划" clearable @change="changePlan"
                :style="{ width: '100%' }">
                <el-option v-for="(item, index) in planList" :key="index"
                  :label="item.year + '年度' + '(' + (item.type == 1 ? '内部' : '外部') + ')质量监控计划'"
                  :value="item.qualityMonitorId"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="300" label="附件" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`ledgerList.${scope.$index}.attachmentUrl`" :rules="rules.attachmentUrl">
              <FileUpload v-model="scope.row.attachmentUrl"></FileUpload>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="删除" align="center">
          <template slot-scope="scope">
            <el-button type="danger" plain size="mini" @click="handleDele(scope.$index)">删行</el-button>

          </template>
        </el-table-column>
      </el-table>

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  updategmonitorLedgerMain,
  monitorLedgerMainAdd,
  monitorLedgerMainInfo,
  selectList,
} from "@/api/quality/legder.js";

export default {
  components: {},
  props: [],
  dicts: ["sys_out_verification_type", "sys_in_verification_type", 'ability_verification_mode'],

  data() {
    return {
      planList: [],
      formData: {
        qualityMonitorId: "",

        ledgerList: [
          {
            lbcpxmcs: undefined,
            nlyzfs: undefined,
            cpxmcs: undefined,
            nlyzwjbh: undefined,
            nlyzwjbhFile: undefined,
            joinUserId: undefined,
            bdsyfabh: undefined,
            bdsyfabhFile: undefined,
            result: undefined,
          },
        ],
      },
      deptOptions: [],
      year: '',
      rules: {
        year: [
          {
            required: false,
            message: "请选择年度",
            trigger: "change",
          },
        ],
        registerTime: [
          {
            required: true,
            message: "请选择登记时间",
            trigger: "blur",
          },
        ],
        result: [
          {
            required: false,
            message: "请输入评价结果",
            trigger: "blur",
          },
        ],
        lbcpxmcs: [
          {
            required: true,
            message: "请输入类别（产品/项目/参数）",
            trigger: "blur",
          },
        ],
        userids: [
          {
            required: true,
            message: "请选择培训人员",
            trigger: "blur",
          },
        ],
        qualityMonitorId: [
          {
            required: false,
            message: "请选择质量监控计划",
            trigger: "change",
          },
        ],
        bdsyfabh: [
          {
            required: true,
            message: "请输入比对试验方案编号",
            trigger: "blur",
          },
        ],
        cpxmcs: [
          {
            required: true,
            message: "请输入产品/项目/参数",
            trigger: "blur",
          },
        ],
        nlyzfs: [
          {
            required: true,
            message: "请输入能力验证方式",
            trigger: "blur",
          },
        ],
        nlyzwjbh: [
          {
            required: true,
            message: "请输入能力验证文件编号",
            trigger: "blur",
          },
        ],

        bdsyfabhFile: [
          {
            required: false,
            message: "请上传附件",
            trigger: "change",
          },
        ],
        nlyzwjbhFile: [
          {
            required: false,
            message: "请上传附件",
            trigger: "change",
          },
        ],
      },
      deptTreeSelect: [],
      type: null,
      dictList: []
    };
  },
  computed: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
    this.getListplan()
  },
  mounted() { },
  methods: {
    changePlan(e) {
      this.type = this.planList.find(
        (i) => i.qualityMonitorId == e
      ).type;
      this.dictList = this.type == 1 ? this.dict.type.sys_in_verification_type : this.dict.type.sys_out_verification_type
    },
    changeMonth(e) {
      console.log(e);
      this.formData.year = e.substr(0, 4)
      this.formData.month = e.substr(5, 6)
      console.log(this.formData.year, this.formData.month);
    },
    getListplan() {
      selectList().then((res) => {
        this.planList = res.data;
      });
    },
    changeOpen(e, i) {
      console.log(e, i);
      // this.formData.userList1 =
      let idList = []
      let nameList = []
      e.forEach((i) => {
        // return { userId: i.userId, userName: i.nickName };
        idList.push(i.joinUserId)
        nameList.push(i.nickName)
      });
      console.log(idList, 'idList');
      this.formData.ledgerList[i].joinUserId = idList.toString()
      this.formData.ledgerList[i].joinUser = nameList.toString()
    },
    handleAdd() {
      this.formData.ledgerList.push({
        lbcpxmcs: undefined,
        nlyzfs: undefined,
        cpxmcs: undefined,
        nlyzwjbh: undefined,
        nlyzwjbhFile: undefined,
        joinUserId: undefined,
        bdsyfabh: undefined,
        bdsyfabhFile: undefined,
        result: undefined,
      });
    },
    handleDele(e) {
      if (this.formData.ledgerList.length == 1) return;
      this.formData.ledgerList.splice(e, 1);
    },
    getinfo() {
      return monitorLedgerMainInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
        // this.formData.year = this.formData.year + '-' + this.formData.month
        this.year = this.formData.year + '-' + this.formData.month
      });
    },
    submitForm() {
      console.log(this.formData.year, this.formData.month);
      if (!this.formData.year || !this.formData.month) {
        this.$modal.msgError("请先选择年月！");
        return
      }
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          // query.year = this.planList.find(
          //   (e) => e.qualityMonitorId == query.qualityMonitorId
          // ).year;
          console.log(query.ledgerList);
          query.ledgerList.forEach((i) => {
            i.joinUserId = i.joinUserId?.toString()
            i.qualityMonitorLedgerId = null
          });
          if (this.formData.qualityMonitorLedgerMainId != undefined) {
            updategmonitorLedgerMain(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            monitorLedgerMainAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
//
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-top: 20px !important;
}
</style>
